<template>
 <div style="padding: 16px 20px;height: 100vh;position: relative;">
    <div style="width: 100%;position: relative;height: 100%;">
      <div style="height: 100%;width: 400px;position: absolute;right: 0;background-color: white;border-radius: 5px;overflow-y: scroll;">
            <div v-if="selectedAccount!=undefined" style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);">
              删除选中的账号
            </div>
            <div v-if="selectedAccount!=undefined" style="padding: 20px 20px;">
              <div style="padding: 10px 10px;margin-bottom: 10px;line-height: 20px;border-radius: 5px;background-color: rgb(242,242,242);">
                <div>账号信息</div>
                <div>账号：{{ selectedAccount.account }}</div>
                <div v-if="selectedAccount.userType!='考生' || selectedAccount.status.slice(0,1)=='已'">姓名：{{ selectedAccount.name }}</div>
                <div v-if="selectedAccount.userType!='考生' || selectedAccount.status.slice(0,1)=='已'">身份证号：{{ selectedAccount.idNumber }}</div>
                <div v-if="selectedAccount.userType=='考生'">状态：{{ selectedAccount.status }}</div>
                <div v-if="selectedAccount.userType=='考生' && selectedAccount.status.slice(0,1)=='已'">分数：{{ selectedAccount.score }}</div>
                <div v-if="selectedAccount.userType=='考生' && selectedAccount.status.slice(0,1)=='已'">位次：{{ selectedAccount.ranking }}</div>
                <div v-if="selectedAccount.userType=='考生' && selectedAccount.status.slice(0,1)=='已'">省份：{{ selectedAccount.province }}</div>
                <div v-if="selectedAccount.userType=='考生' && selectedAccount.status.slice(0,1)=='已'">科目：{{ selectedAccount.subjects }}</div>
              </div>
              <a-trigger trigger="click" :unmount-on-close="false">
                <a-button type="primary" status="danger" style="padding: 0 30px;">删除</a-button>
                <template #content>
                  <div style="width: 300px;padding: 20px 20px;border: 2px solid rgba(242,242,242,0.6);border-radius: 5px;background-color: rgba(242,242,242,0.6);box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translateX(60px);backdrop-filter: blur(20px);">
                    <div style="margin-bottom: 20px;">
                      此账号的信息将被删除。
                    </div>
                    <div style="text-align: right;">
                      <a-button style="padding: 0 30px;" :loading="isDeleting" @click="deleteAccount">确定</a-button>
                    </div>
                  </div>
                </template>
              </a-trigger>
            </div>
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);">
              添加咨询师账号
            </div>
            <div style="padding: 20px 20px;">
              <div style="margin-bottom: 10px;">
                姓名
                <a-input :disabled="iaAdding" v-model="addZXSName" style="padding: 0 0;height: 35px;border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;" placeholder="请输入姓名" allow-clear></a-input>
              </div>
              <div style="margin-bottom: 10px;">
                身份证号
                <a-input :disabled="iaAdding" v-model="addZXSIdNumber" style="padding: 0 0;height: 35px;border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;" placeholder="请输入身份证号" allow-clear></a-input>
              </div>
              <div style="margin-bottom: 10px;">
                密码
                <a-input :disabled="iaAdding" v-model="addZXSPassword" type="password" style="padding: 0 0;height: 35px;border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;" placeholder="请输入密码" allow-clear></a-input>
              </div>
              <div style="margin-bottom: 10px;">
                重复密码
                <a-input :disabled="iaAdding" v-model="addZXSPasswordR" type="password" style="padding: 0 0;height: 35px;border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;" placeholder="请再次输入密码" allow-clear></a-input>
              </div>
              <a-button :loading="isAdding" type="primary" style="padding: 0 30px;margin-top: 10px;" @click="addNewZXS">添加</a-button>
            </div>
      </div>
      <div style="width: calc(100% - 420px);height: 100%;background-color: white;border-radius: 5px;position: absolute;left: 0;overflow-y: hidden;overflow-x: hidden;">
        <div style="padding: 20px 20px;border-bottom: 1px solid var(--color-neutral-4);position: relative;">
          账号管理
        </div>
        <div style="padding: 20px 20px;width: 100%;height: calc(100% - 56.76px);position: relative;">
          <div>
            <span>
              <div style="display: inline-block;width: calc(33.3% - 4px);">
                姓名
                <a-input v-model="name" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入姓名"></a-input>
              </div>
            </span>
            <span style="margin-left: 6px;">
              <div style="display: inline-block;width: calc(33.3% - 4px);">
                身份证号
                <a-input v-model="idNumber" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入身份证号"></a-input>
              </div>
            </span>
            <span style="margin-left: 6px;">
              <div style="display: inline-block;width: calc(33.3% - 4px);">
                账号
                <a-input v-model="account" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入账号"></a-input>
              </div>
            </span>
          </div>
          <div style="text-align: right;margin-top: 10px;">
            <a-button style="padding: 0 30px;" @click="()=>{
              account='';
              idNumber='';
              name='';
              getAccounts();
            }">显示全部</a-button>
            <a-button style="padding: 0 30px;margin-left: 10px;" type="primary" @click="getAccounts">查找</a-button>
          </div>
          <div style="width: 100%;height: calc(100% - 93.1px - 10px);margin-top: 10px;position: relative;">
            <a-table @row-click="openRightMenu" :loading="isSearching" :columns="[
      {
        title: '账号',
        dataIndex: 'account',
      },
      {
        title: '状态',
        dataIndex: 'status',
      },
      {
        title: '类型',
        dataIndex: 'userType',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '身份证号',
        dataIndex: 'idNumber',
      },
      {
        title: '分数',
        dataIndex: 'score',
      },
      {
        title: '位次',
        dataIndex: 'ranking',
      },
      {
        title: '省份',
        dataIndex: 'province',
      },
      {
        title: '科目',
        dataIndex: 'subjects',
      },
    ]" :data="accounts" style="width: 100%;height: 100%;" />
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios'
import sha256 from 'sha256';

export default{
  data(){
    return{
      isZXSPage:false,
      accounts:[],
      account:'',
      name:'',
      idNumber:'',
      isSearching:false,
      selectedAccount:undefined,
      isDeleting:false,
      addZXSName:'',
      addZXSIdNumber:'',
      addZXSPassword:'',
      addZXSPasswordR:'',
      isAdding:false,
    }
  },
  mounted(){
    this.getAccounts();
  },
  methods:{
    addNewZXS(){
      if(this.addZXSName==''){
        this.$message.error({
          content:'请输入咨询师姓名',
        })
        return;
      }
      if(this.addZXSIdNumber==''){
        this.$message.error({
          content:'请输入咨询师身份证号',
        })
        return;
      }
      if(this.addZXSPassword==''){
        this.$message.error({
          content:'请输入咨询师登录密码',
        })
        return;
      }
      if(this.addZXSPasswordR==''){
        this.$message.error({
          content:'请再次输入咨询师登录密码',
        })
        return;
      }
      if(this.addZXSPassword!=this.addZXSPasswordR){
        this.$message.error({
          content:'两次输入的密码不一致',
        })
        return;
      }
      this.isAdding=true;
      var data = {
        name:this.addZXSName,
        idNumber:this.addZXSIdNumber,
        password:sha256(this.addZXSPassword)
      }
      var config = {
   method: 'post',
   url: '/api/v1/users/add?data=' + JSON.stringify(data),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
  this.isAdding=false;
  console.log(res)
   if(res.data.status==0){
    this.getAccounts();
    this.$message.success({
      content:'已添加',
    })
   }else{
    this.$message.error({
      content:'添加失败',
    })
   }
})
    },
    deleteAccount(){
      this.isDeleting=true;
var data = {
  account:this.selectedAccount.account,
  
}

      var config = {
   method: 'post',
   url: '/api/v1/users/delete?data=' + JSON.stringify(data),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
  this.isDeleting=false;
   if(res.data.status==1){
    this.selectedAccount=undefined;
    this.getAccounts();
   }else{
    this.$message.error({
      content:'删除失败',
    })
   }
})
    },
    openRightMenu(e){
      console.log(e)
      this.selectedAccount=e;
    },
    getAccounts(){
      this.isSearching=true;
      var data = {
        name:this.name,
        account:this.account,
        idNumber:this.idNumber,
      }

      var config = {
   method: 'get',
   url: '/api/v1/users/search?data=' + JSON.stringify(data),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
  this.isSearching=false;
   console.log(res)
   let pre = [];
   for(let i=0;i<res.data.results.length;i++){
      if(res.data.results[i].userType==1){
        pre.push({
          account:res.data.results[i].account,
          name:res.data.results[i].name,
          idNumber:res.data.results[i].idNumber,
          score:res.data.results[i].score,
          ranking:res.data.results[i].ranking,
          province:res.data.results[i].province,
          subjects:res.data.results[i].subjects==''?'':this.getSubjectString(res.data.results[i].subjects),
          status:res.data.results[i].name==''?'未完善信息':'已完善信息',
          userType:res.data.results[i].userType==1?'考生':'咨询师'
        })
      }else{
        pre.push({
          account:res.data.results[i].account,
          name:res.data.results[i].name,
          idNumber:res.data.results[i].idNumber,
          score:'-',
          rankjing:'-',
          province:'-',
          subjects:'-',
          status:'-',
          userType:res.data.results[i].userType==1?'考生':'咨询师'
        })
      }
   }
   this.accounts=pre;
})
    },
    getSubjectString(string){
      if(string.slice(0,1)=='1'){
                let re = '';
                for(let i=1;i<=3;i++){
                  if(i!=1){
                    re+='、'
                  }
                  switch (string.slice(i,i+1)) {
                    case '1':
                      re+='物理';
                      break;
                    case '2':
                      re+='化学';
                      break;
                    case '3':
                      re+='生物';
                      break;
                    case '4':
                      re+='政治';
                      break;
                    case '5':
                      re+='历史';
                      break;
                    case '6':
                      re+='地理';
                      break;
                  }
                }
                return re;
      }
      if(string.slice(0,1)=='2'){
                let re = '';
                for(let i=1;i<=3;i++){
                  if(i!=1){
                    re+='、'
                  }
                  switch (string.slice(i,i+1)) {
                    case '1':
                      re+='化学';
                      break;
                    case '2':
                      re+='生物';
                      break;
                    case '3':
                      re+='政治';
                      break;
                    case '4':
                      re+='地理';
                      break;
                    case '5':
                      re+='物理';
                      break;
                    case '6':
                      re+='历史';
                      break;
                  }
                }
                return re;
      }
      if(string.slice(0,1)=='3'){
        return string.slice(1,2)=='1'?'理科':'文科';
      }
    }
  },
  props:{

  },
}
</script>

<style scoped>

</style>